<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>css3基础</title>
    <style>
        h3{
            color: #33CC00;
        }
        h4{
            color: rgb(20, 0, 204);
        }

        .border_color_test{
            width:100px;  height:100px; 
            color:#ccc;
            transition: color .25s;
            border: 1px solid;
            position:relative;
        }
        .border_color_test:hover{
            color:#06c;
        }
        .border_color_test:before{
            content:" ";      
            display:block;  
            width:60px;  
            height:10px; 
            border-top:50px solid;
        }
        .border_color_test:before{
            border-left:50px solid;
            height:10px; 
        }

        
        .transform_test img{
		    width:150px;
            height:150px;

            display:block;
            opacity:0;

            transform:translate(-100px,-100px);
            -webkit-transform:translate(-100px,-100px);

            transition: opacity 1s ease-in-out 0.5s,transform 1s ease-in-out;
            -webkit-transition:opacity 1s ease-in-out 0.5s,-webkit-transform 1s ease-in-out;
        }
        
        .transform_test:hover img{
		    opacity:1;

            transform:translate(0px,0px);
            -webkit-transform:translate(0px,0px);

		    transition: opacity 1s ease-in-out,transform 1s ease-in-out .1s;
		    -webkit-transition: opacity 1s ease-in-out,-webkit-transform 1s ease-in-out .1s;
        }

        
		.cardfan{
		  width:300px;
		  height:200px;
		  margin: 2rem auto;
		}
		.cardfan > img{
		  position:absolute;
		  border:10px solid #fff;
		  box-sizing:border-box;
		  box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.2);
		  -webkit-transform-origin: center 400px;
		  transform-origin: center 400px;
		  -webkit-transition: -webkit-transform .7s ease;
		  transition: transform .7s ease;
		}
		.cardfan img:first-child{
		  -webkit-transform:rotate(5deg);
		  transform:rotate(5deg);
		}
		.cardfan img:last-child{
		  -webkit-transform:rotate(-5deg);
		  transform:rotate(-5deg);
		}
		.cardfan:hover img:first-child{
		  -webkit-transform:rotate(25deg);
		  transform:rotate(25deg);
		}
		.cardfan:hover img:last-child{
		  -webkit-transform:rotate(-25deg);
		  transform:rotate(-25deg);
		}


    .back {
        width: 100%;
        height: 100%;
        background: white;
        animation-name: backdiv;
        animation-duration: 1s; 
        animation-iteration-count: infinite;
    }

  .heart {
    position: absolute;
    background-color: pink;
    height: 50px;
    width: 50px;
    transform: rotate(-45deg);
    animation-name: beat;
    animation-duration: 1s;
    animation-iteration-count: infinite; 
  }
  .heart:after {
    background-color: pink;
    content: "";
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0px;
    left: 25px;
  }
  .heart:before {
    background-color: pink;
    content: "";
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: -25px;
    left: 0px;
  }

  @keyframes backdiv {
    50% {
      background: #ffe6f2;
    }
  }

  @keyframes beat {
    0% {
      transform: scale(1) rotate(-45deg);
    }
    50% {
      transform: scale(0.6) rotate(-45deg);
    }
  }


    </style>
</head>

<body>
    <div>
        <h2>border</h2>

        <h3>border-color 、border-image 、border-radius 及box-shadow </h3>

        <div style="float:left;width: 400px;">
            <h4> border-radius 圆角</h4>
            <p>border-radius:10px; /* 所有角都使用半径为10px的圆角 */ </p>
            <p>border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */ </p>
            <p>不要以为border-radius的值只能用px单位，你还可以用百分比或者em，但兼容性目前还不太好。</p>
            <div style="width:100px;height:100px;background-color: rgb(187, 98, 25);
                border-radius:10px;">
            </div>
            <p>半圆</p>
            <div style="width:100px;height:100px;background-color: rgb(187, 98, 25);
                border-radius:50px 50px 0 0;">
            </div>
            <p>圆</p>
            <div style="width:100px;height:100px;background-color: rgb(187, 98, 25);
                border-radius:50px;">
            </div>
        </div>
        
        <div style="float:left;width: 600px;margin-left: 50px;">
            <h4> box-shadow 阴影</h4>
            <p>box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; </p>
            <p>阴影模糊半径：此参数可选，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊； </p>
            <p>阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小； </p>
            <p>inset 内部阴影 默认为外部阴影 </p>
            
            <p>一侧外影</p>
            <div style="width:100px;height:100px;background-color: rgb(187, 98, 25);
                box-shadow:4px 4px 6px rgb(27, 167, 27); ">
            </div>
            <p>两侧外影</p>
            <div style="width:100px;height:100px;background-color: rgb(187, 98, 25);
                box-shadow:4px 4px 6px rgb(27, 167, 27), -4px -4px 6px rgb(27, 167, 27);  ">
            </div>
            <p>两侧外影</p>
            <div style="width:100px;height:100px;background-color: rgb(187, 98, 25);
                box-shadow:0px 0px 6px 6px rgb(27, 167, 27);">
            </div>
            <p>内影</p>
            <div style="width:100px;height:100px;background-color: rgb(187, 98, 25);
                box-shadow:-4px -4px 6px #f00 inset, 4px 4px 6px rgb(27, 167, 27) inset; ">
            </div>
            <p>内影</p>
            <div style="width:100px;height:100px;background-color: rgb(187, 98, 25);
                box-shadow:0px 0px 6px 6px rgb(27, 167, 27) inset; ">
            </div>
            <p>综合</p>
            <div style="width:100px;height:100px;background-color: rgb(187, 98, 25);
                box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;">
            </div>
        </div>
        
        <div style="float:left;width: 400px;">
            <h4> border-image </h4>
            <p>background:url(xx.jpg) 10px 20px no-repeat; </p>
            <p>repeat 重复 </p>
            <p>round 可以理解为圆满的铺满。为了实现圆满所以会压缩（或拉伸</p>
            <p>Stretch 很好理解就是拉伸，有多长拉多长。</p>
            <p>背景图片由9个矩形（70*70像素）拼成的一张图（210*210像素） </p>
            <div style="width:210px; height:210px;background-color: rgb(187, 98, 25);
                border:70px solid;
                border-image:url(images/bg_border.jpg) 70 repeat">
            </div>


            
            <h4> background-color 颜色之RGBA </h4>
            <div style="width:220px;height:100px;background-color: rgb(213, 218, 223);position: relative;">
                <div style="width:100px;height:100px;background-color: rgb(187, 98, 25);float: left;"></div>
                <div style="width:100px;height:100px;background-color: rgba(187, 98, 25, 0.5);float: right;"></div>
            </div>


            <h4> CSS3颜色 线性渐变 </h4>
            <p>background-image: linear-gradient(to left, red, orange); </p>
            <p>第一个参数省略时，默认为“180deg”，等同于“to bottom”, “0deg”，等同于“to top”。顺时针从12点转。 可选：to top,to right,to bottom,to left,to top left,to top right </p>
            <p>第二个和第三个参数，表示颜色的起始点和结束点，可以有多个颜色值。</p>
            <div style="width:400px;height:100px;background-color: rgb(213, 218, 223);">
                <div style="height:100px;
                    background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);"></div>
                <div style="height:100px;
                    background-image:radial-gradient(to left, red, orange,yellow,green,blue,indigo,violet);"></div>
                
            </div>
            
        </div>

        
        <div style="float:left;width: 400px;">
            <h4> CSS3颜色 径向渐变色彩 </h4>
            <p> radial-gradient( shape at position ,<color-stop-list>)
            <p> radial-gradient(
                    [ [ circle || <length> ]                         [ at <position> ]? , |
                        [ ellipse || [ <length> | <percentage> ]{2} ]  [ at <position> ]? , |
                        [ [ circle | ellipse ] || <extent-keyword> ]   [at <position> ]? , |
                        at <position> ,
                    ]?
                    <color-stop-list> [ , <color-stop-list> ]+
                    )
                    where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
                        and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
                        and <linear-color-stop> = <color> [ <color-stop-length> ]? 
                        and <color-stop-length> = [ <percentage> | <length> ]{1,2}
                        and <color-hint> = [ <percentage> | <length> ] 
            </p>

            <p>closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边；</p>
            <p>closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角；</p>
            <p>farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边；</p>
            <p>farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角，这个是默认值；</p>
            <p><a href="http://www.mrszhao.com/post/59.html" target="_blank">放射性渐变</a> &nbsp;<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient" target="_blank">api</a> </p>
            
            <div style="width:400px;height:100px;background-color: rgb(213, 218, 223);">
                <div style="margin-top:10px;height:400px;
                    background-image:radial-gradient(circle at center, red 0, blue 20%, green 100%)"></div>
                <div style="margin-top:10px;height:400px;
                    background-image:radial-gradient(circle at left top, red 0, blue, green, transparent)"></div>
                <div style="margin-top:10px;height:400px;
                    background-image:radial-gradient(circle at 100px 100px, red 0, blue, green, transparent)"></div>
                <div style="margin-top:10px;height:400px;
                    background-image:radial-gradient(circle farthest-corner at 80% 80%, red 0, blue, green, transparent)"></div>
                
            </div>
        </div>


        <div style="clear:both;"></div>

        <h3>text-overflow 与 word-wrap</h3>
        <div style="width: 400px;">
            <h4> text-overflow </h4>
            <p>设置是否使用一个省略标记，当文本溢出时 </p>

            <p>同时设置才起作用 text-overflow:ellipsis; overflow:hidden; white-space:nowrap;  </p>
            <div style="width:300px;background-color: rgb(213, 218, 223);">
                <p style="text-overflow:ellipsis; overflow:hidden; white-space:nowrap;">兼容性目前还不太好兼容性目前还不太好兼容性</p>
            </div>

            <h4> 文本阴影text-shadow </h4>
            <p>text-shadow可以用来设置文本的阴影效果。</p>
            <p>语法：  text-shadow: X-Offset Y-Offset blur color;</p>
            <p>X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移；  </p>    
            <p>Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移；</p>
            <p>Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；</p>
            <p>Color：是指阴影的颜色，其可以使用rgba色。</p>
            <div style="width:300px;background-color: rgb(213, 218, 223);">
                <span style="text-shadow: 0 1px 1px rgb(187, 98, 25);">文本的阴影效果文本的阴影效果</span>
            </div>


            <h3>border</h3>
            <div>

                
                <p>border-color 与color一起变色 在没有设置border-color时，  box-shadow  text-shadow也一样</p>
                <div class="border_color_test" ></div>


                
                <div style=" margin-top: 10px;
                    width:100px;height:100px;
                    border:100px solid;
                    border-color: red green blue orange;
                    ">
                </div>
                
                <div style="margin-top: 10px;
                    width:0px;height:0px;
                    border:100px solid;
                    border-color: red green blue orange;
                    ">
                </div>

                <p>向下三角</p>
                <div style="margin-top: 10px;
                    width:0px;height:0px;
                    border:100px solid;
                    border-color: red transparent  transparent transparent;
                    ">
                </div>

                <div style="margin-top: 10px;
                    width:0;
                    height:0;
                    border:50px solid red;
                    border-top-color:transparent;
                    ">
                </div>
                
                <div style="margin-top: 10px;
                    width:0px;height:0px;
                    border:100px solid;
                    border-color: red green transparent transparent;
                    ">
                </div>

                
                <p>斜三角</p>
                <div style="margin-top: 10px;
                    width:0;
                    height:0;
                    border-top: 60px solid red;
                    border-left: 100px solid transparent;
                    ">
                </div>

                

                <h4>用border使背景距离左边有间距</h4>
                <p>background-position默认相对左上方定位</p>
                <div style="width:200px;height:200px;
                    border:10px solid rgb(240, 23, 229);
                    background-image: url(images/bg111.png); 
                    background-position: 20px 50px;
                    background-repeat: no-repeat;">
                </div>
                
                <h4>用border使背景距离右边有间距</h4>
                <p>100%右侧定位不计算border区域</p>

                
                <div style="width:200px;height:200px;margin-top:10px;
                    border:10px solid rgb(240, 23, 229); ">
                    
                    <div style="height:200px;
                        border-right: 20px solid transparent; 
                        background-image: url(images/bg111.png); 
                        background-position: 100% 70px;
                        background-repeat: no-repeat;">
                        
                    </div>
                </div>



                <h4>logo变色</h4>
                <p></p>
                <div style="position: relative; width:100px;height:100px;left: -20px; 
                    border-image: url(images/del_pic.png);
                    border-right: 20px solid transparent;filter: drop-shadow(20px 0);">
                    
                </div>



            </div>





        </div>

        
        <h3 style="margin-top:300px;">CSS3背景 background</h3>
        <div style="float:left; width: 400px;">
            <h4> CSS3背景 background-origin </h4>
            <p>设置元素背景图片的原始起始位置。</p>
            <p>语法： background-origin ： border-box | padding-box | content-box;</p>
            <p>参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。</p>
            <span>注意：如果背景不是no-repeat，这个属性无效</span>

            <p>border-box</p>
            <div style="width:150px;height:100px;
            border:10px dashed #000; 
            padding:10px;
            background:rgb(187, 98, 25) url(images/bg_c1.jpg)  no-repeat;
            background-origin: border-box;
             "></div>
            <p>padding-box</p>
             <div style="width:150px;height:100px;
             border:10px dashed #000; 
             padding:10px;
             background:rgb(187, 98, 25) url(images/bg_c1.jpg)  no-repeat;
             background-origin: padding-box;
              "></div>
              
            <p>content-box</p>
             <div style="width:150px;height:100px;
             border:10px dashed #000; 
             padding:10px;
             background:rgb(187, 98, 25) url(images/bg_c1.jpg)  no-repeat;
             background-origin: content-box;
              "></div>
                
            </div>
        </div>
        <div style="float:left; width: 400px;margin-left: 50px;">
            <h4> CSS3背景 background-clip </h4>
            <p>用来将背景图片做适当的裁剪以适应实际需要。</p>
            <p>语法： background-clip ： border-box（默认值） | padding-box | content-box | no-clip</p>
            <p>参数分别表示从边框、或内填充，或者内容区域向外裁剪背景</p>
            <span>注意：如果背景不是no-repeat，这个属性无效</span>

            <p>padding-box</p>
            <div style="width:150px;height:100px;
            border:10px dashed #000; 
            padding:10px;
            background:rgb(187, 98, 25) url(images/bg_common2.jpg)  no-repeat;
            background-origin: border-box;
            background-clip: padding-box;
             "></div>
            <p>content-box</p>
             <div style="width:150px;height:100px;
             border:10px dashed #000; 
             padding:10px;
             background:rgb(187, 98, 25) url(images/bg_common2.jpg)  no-repeat;
             background-origin: padding-box;
             background-clip: content-box;
              "></div>
              
            <p>padding-box</p>
             <div style="width:150px;height:100px;
             border:10px dashed #000; 
             padding:10px;
             background:rgb(187, 98, 25) url(images/bg_common2.jpg)  no-repeat;
             background-origin: content-box;
             background-clip: padding-box;
              "></div>
                
            </div>

        
        </div>
        <div style="float:left; width: 400px;margin-left: 50px;">    
            <h4> CSS3背景 background-size </h4>
            <p>设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。</p>
            <p>语法： background-size: auto（默认） | <长度值> | <百分比> | cover | contain</p>
            <p>auto：默认值，不改变背景图片的原始高度和宽度</p>
            <p><长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放</p>
            <p><百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；</p>
            <p>cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；</p>
            <p>contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。</p>

            <p>cover</p>
            <div style="width:150px;height:100px;
            border:10px dashed #000; 
            padding:10px;
            background:rgb(187, 98, 25) url(images/bg_common2.jpg)  no-repeat;
            background-size: cover;
             "></div>
            <p>contain</p>
             <div style="width:150px;height:100px;
             border:10px dashed #000; 
             padding:10px;
             background:rgb(187, 98, 25) url(images/bg_common2.jpg)  no-repeat;
             background-size: contain;
              "></div>

         
        </div>
        <div style="float:left; width: 400px;margin-left: 50px;">       
            <h4> CSS3背景 multiple backgrounds </h4>
            <p>设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。</p>
            <p> 语法：background-image:url1,url2,...,urlN;</p>
            <p>  background-repeat : repeat1,repeat2,...,repeatN;</p>
            <p>  backround-position : position1,position2,...,positionN;</p>
            <p>  background-size : size1,size2,...,sizeN;</p>
            <p>  background-attachment : attachment1,attachment2,...,attachmentN;</p>
            <p>  background-clip : clip1,clip2,...,clipN;</p>
            <p>  background-origin : origin1,origin2,...,originN;</p>
            <p>  background-color : color;</p>

            <div style="width:150px;height:100px;
            margin-top: 10px;
            border:10px dashed #000; 
            padding:10px;
            background:rgb(187, 98, 25) url(images/bg_common2.jpg)  no-repeat;
            background:url(images/bg_c1.jpg) no-repeat, 
                       url(images/bg_c1.jpg) no-repeat;
            background-position: left top, right bottom; 
             "></div>
            </div>
        </div>

        
        <div style="clear:both;"></div>

        <h3>css选择器</h3>
        <div style="float:left; width: 400px;">     
            <h4> <a href="https://www.w3school.com.cn/cssref/css_selectors.asp">css基础选择器</a> </h4>

            <p> 标签选择器 </p>
            <p>类选择器         .classname     可以同时为一个元素同时设置多个样式 </p>
            <p>id选择器         #id             </p>
            <p>                div + p           紧接在 div 元素之后的所有p元素</p>
            <p>子选择器         div > p           作用于子元素的第一代后代</p>
            <p>包含(后代)选择器  div  p           作用于所有div的子后代所有p元素</p>
            <p>通用选择器       *                 匹配html中所有标签元素</p>
            <p>伪类选择符        input:focus a:hover a:link a:visited p:first-letter p:first-child 	p:first-line  	p:before  p:after     </p>
            <p>分组选择符       div,p             为多个标签元素设置同一个样式</p>
            <p>--------</p>
            <P>[attribute] [attribute=value]</P>
            <p>[attribute~=value]      包含某个特定独立的单词 并且value被空格隔开         </p>
            <p>[attribute|=value]      找到value开头，并且value是被“-”和其他内容隔开的         </p>


            <h4> CSS的继承、层叠和特殊性 </h4>

            <p>继承  span 继承p标签的color 不继承p标签的boder   </p>
            <p>权值的规则 继承的权值为0.1 标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100</p>
            <p>后面的样式会覆盖前面的样式 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中） </p>
            <p>!important; 为某些样式设置具有最高权值  浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式</p>

        </div>
        <div style="float:left; width: 400px;margin-left: 50px;">     

            <h4>css3新增选择器</h4>

            <p>[attribute^=value]  开头</p>
            <p>[attribute$=value]  结尾</p>
            <p>[attribute*=value]  包含</p>
            <p>div ~ p 选择前面有div的所有的p元素 </p>
            <p>--------</p>
            <p>:enabled :disabled  :checked :not(selector)  p:empty 没有子元素的每个 p 元素</p>ol > li:first-child
            <p>:first-child    ol > li:first-child/p>
            <p>:last-child     .post p:last-child </p>
            <p></p>
            <p>nth-child(n) nth-last-child(n)   ol > li:nth-child(2n)偶数行    也可以指定具体的数值 </p>
            <p></p>
            <p> first-of-type .wrapper > p:first-of-type  用来定位一个父元素下的某个类型的第一个子元素。</p>
            <p> last-of-type  .wrapper > p:last-of-type   选择父元素class为wrapper的最后一个p的元素  p不一定是最后一个子元素  </p>
            <p></p>
            <p>     nth-of-type(n)   .wrapper > p:nth-of-type(2n)           用来定位父元素中指定的某种类型的子元素  n可以是具体的整数，也可以是表达式，还可以是关键词</p>
            <p>nth-last-of-type(n)   .wrapper > p:nth-last-of-type(3)     选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始</p>
            <p></p>
            <p> only-child          选择的是父元素中只有一个子元素，而且只有唯一的一个子元素</p>
            <p> only-of-type        选择这个元素中的唯一一个类型子元素</p>
            <p></p>
            <p>::before和::after    给元素的前面或后面插入内容，这两个常和"content"配合使用  .clearfix:after {clear: both;content: "."} </p>


            <div style="width:300px;background-color: rgb(213, 218, 223);">
                <p style="text-overflow:ellipsis; overflow:hidden; white-space:nowrap;">兼容性目前还不太好兼容性目前还不太好兼容性</p>
            </div>

        </div>




        <div style="clear:both;"></div>

        <hr>
        <h3>CSS3中的变形与动画</h3>
        <div style="float:left; width: 400px;">
            
            <h4> 位移 translate()</h4>

            <p> 将元素向指定的方向移动</p>
            <p>translate(x,y)水平方向和垂直方向同时移动</p>
            <p>translateX(x)仅水平方向移动</p>
            <p>translateY(Y)仅垂直方向移动</p>

            <p>通过translate(10px,20px)函数将元素向X轴向右移动10px,Y轴向下移动20px。</p>
            <div style="width:200px;height:100px;background-color: rgb(213, 218, 223);border: 2px dotted blue;">
                <div style="width:200px;height:100px;background: green;
                    transform:translate(10px,20px);
                    -moz-transform: translate(10px,20px);
                    -webkit-transform: translate(10px,20px);
                    text-align: center;color: #fff; line-height: 100px;">
                    <span>我可以移动(^_^)</span>
                </div>
            </div>

            
            <h4> 旋转 rotate()</h4>

            <p> 指定的角度参数使元素相对原点进行旋转</p>
            <p> rotate(45deg)  正数 顺时针</p>
            <p> transform: rotate();  -moz-transform: rotate();  -webkit-transform: rotate();      </p>
            <p>正值</p>
            <div style="width:200px;height:100px;background-color: rgb(213, 218, 223);border: 2px dotted blue;">
                <div style="width:200px;height:100px;background: green;
                    transform:rotate(20deg);
                    -moz-transform: rotate(20deg);
                    -webkit-transform: rotate(20deg);
                    text-align: center;color: #fff; line-height: 100px;">
                    <span>我不想旋转(^_^)</span>
                </div>
            </div>

            <p>负值</p>
            <div style="width:200px;height:100px;background-color: rgb(213, 218, 223);border: 2px dotted blue;">
                <div style="width:200px;height:100px;background: green;
                    transform:rotate(-20deg);
                    -moz-transform: rotate(-20deg);
                    -webkit-transform: rotate(-20deg);
                    text-align: center;color: #fff; line-height: 100px;">
                    <span>我不想旋转(^_^)</span>
                </div>
            </div>
    

            
            <h4> 扭曲 skew()</h4>

            <p> 让元素倾斜显示 不会旋转，而只会改变元素的形状</p>
            <p>skew(x,y)使元素在水平和垂直方向同时扭曲 </p>
            <p>skewX(x)仅使元素在水平方向扭曲变形</p>
            <p>skewY(y)仅使元素在垂直方向扭曲变形</p>
            <p></p>
            <p> rotate(45deg)  正数 顺时针</p>
            <p> transform: rotate();  -moz-transform: rotate();  -webkit-transform: rotate();      </p>

            <p>skew只设置一个值时表示x 扭曲10 deg</p>
            <div style="width:200px;height:100px;background-color: rgb(213, 218, 223);border: 2px dotted blue;">
                <div style="width:200px;height:100px;background: green;
                    transform:skew(10deg);
                    -moz-transform: skew(10deg);
                    -webkit-transform: skew(10deg);
                    text-align: center;color: #fff; line-height: 100px;">
                    <span>我不想扭曲(^_^)</span>
                </div>
            </div>
            <p>x 扭曲-10 deg</p>
            <div style="width:200px;height:100px;background-color: rgb(213, 218, 223);border: 2px dotted blue;">
                <div style="width:200px;height:100px;background: green;
                    transform:skewX(-10deg);
                    -moz-transform: skewX(-10deg);
                    -webkit-transform: skewX(-10deg);
                    text-align: center;color: #fff; line-height: 100px;">
                    <span>我不想扭曲(^_^)</span>
                </div>
            </div>
            <p>y 扭曲10 deg</p>
            <div style="width:200px;height:100px;background-color: rgb(213, 218, 223);border: 2px dotted blue;">
                <div style="width:200px;height:100px;background: green;
                    transform:skewY(10deg);
                    -moz-transform: skewY(10deg);
                    -webkit-transform: skewY(10deg);
                    text-align: center;color: #fff; line-height: 100px;">
                    <span>我不想扭曲(^_^)</span>
                </div>
            </div>
            <p>同时扭曲10 deg</p>
            <div style="width:200px;height:100px;background-color: rgb(213, 218, 223);border: 2px dotted blue;">
                <div style="width:200px;height:100px;background: green;
                    transform:skew(10deg,10deg);
                    -moz-transform: skew(10deg,10deg);
                    -webkit-transform: skew(10deg,10deg);
                    text-align: center;color: #fff; line-height: 100px;">
                    <span>我不想扭曲(^_^)</span>
                </div>
            </div>
        </div>
        <div style="float:left; width: 400px;margin-left: 50px;">      
            <h4> 缩放 scale()</h4>

            <p> 让元素根据中心原点对对象进行缩放</p>
            <p>scale(X,Y)使元素水平方向和垂直方向同时缩放 </p>
            <p>scaleX(x)元素仅水平方向缩放</p>
            <p>scaleY(y)元素仅垂直方向缩放</p>
            <p></p>
            <p> 默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大。</p>
            <p> transform: scale();  -moz-transform: scale();  -webkit-transform: scale();      </p>

            <p>skew只设置一个值时表示x 扭曲10 deg</p>

            <p>正常</p>
            <div style="width:100px;height:100px;background-color: rgb(213, 218, 223);border: 2px dotted blue;">
                <div style="width:100px;height:100px;background: green;
                    text-align: center;color: #fff; line-height: 100px;">
                    <span>我是金箍棒(^_^)</span>
                </div>
            </div>

            <p>x放大1.5</p>
            <div style="width:100px;height:100px;background-color: rgb(213, 218, 223);border: 2px dotted blue;">
                <div style="width:100px;height:100px;background: green;
                    transform:scaleX(1.5);
                    -moz-transform: scaleX(1.5);
                    -webkit-transform: scaleX(1.5);
                    text-align: center;color: #fff; line-height: 100px;">
                    <span>我是金箍棒(^_^)</span>
                </div>
            </div>
            
            <p>y放大1.5</p>
            <div style="width:100px;height:100px;background-color: rgb(213, 218, 223);border: 2px dotted blue;">
                <div style="width:100px;height:100px;background: green;
                    transform:scaleY(1.5);
                    -moz-transform: scaleY(1.5);
                    -webkit-transform: scaleY(1.5);
                    text-align: center;color: #fff; line-height: 100px;">
                    <span>我是金箍棒(^_^)</span>
                </div>
            </div>

            <p>xy放大1.5</p>
            <div style="width:100px;height:100px;background-color: rgb(213, 218, 223);border: 2px dotted blue;">
                <div style="width:100px;height:100px;background: green;
                    transform:scale(1.5,1.5);
                    -moz-transform: scale(1.5,1.5);
                    -webkit-transform: scale(1.5,1.5);
                    text-align: center;color: #fff; line-height: 100px;">
                    <span>我是金箍棒(^_^)</span>
                </div>
            </div>
            
            <h4 style="margin-top: 50px;"> 原点 transform-origin</h4>

            <p> 重置transform-origin改变元素原点位置  默认情况之下，其中心点是居于元素X轴和Y轴的50%处 </p>
            <p> transform-origin取值和元素设置背景中的background-position取值类似</p>
            <p> 关键词：top right bottom left 组合</p>
            <p> 百分比：</p>
            <p> -webkit-transform-origin: top right;
                -moz-transform-origin: top right;
                transform-origin: top right;</p>

            <p>改变原点后的旋转</p>
            <div style="width:100px;height:100px;background-color: rgb(213, 218, 223);border: 2px dotted blue;">
                <div style="width:100px;height:100px;background: green;
                    transform:rotate(20deg);
                    -moz-transform: rotate(20deg);
                    -webkit-transform: rotate(20deg);

                    -webkit-transform-origin: top right;
                    -moz-transform-origin: top right;
                    transform-origin: top right;

                    text-align: center;color: #fff; line-height: 100px;">
                    <span>我是金箍棒(^_^)</span>
                </div>
            </div>

        </div>


        <div style="float:left; width: 400px;margin-left: 50px;"> 
            
                <h4> 过渡属性 transition-property </h4>
    
                <p> 平滑地以动画效果改变CSS的属性值 </p>
                <p> transform-origin取值和元素设置背景中的background-position取值类似</p>
                <p></p>

                <p>1</p>
                <div class="transform_test" style="width:300px;height:300px;
                    background: #000  url(images/moon.png) no-repeat center;
                    background-size:cover;
                    margin:20px auto;
                    ">
                    <img src="images/change.png" ></div>
                </div>

                
                <p>2</p>
                <div style="position: relative;">
                    <div class="cardfan">
                        <img src="images/333.jpg" ></img>
                        <img src="images/333.jpg" ></img>
                        <img src="images/333.jpg" ></img>
                    </div>
                </div>

                
                <p>3</p>
                <div style="position: relative;">
                    <div class="cardfan">
                        <img src="images/333.jpg" ></img>
                        <img src="images/333.jpg" ></img>
                        <img src="images/333.jpg" ></img>
                    </div>
                </div>
    
            </div>
        </div>

    </div>











        <div style="clear:both;"></div>

        <hr>
        <h3>text-overflow 与 word-wrap</h3>
        <div style="width: 400px;">
            <h4> text-overflow </h4>
            <p>设置是否使用一个省略标记，当文本溢出时 </p>

            <p>同时设置才起作用 text-overflow:ellipsis; overflow:hidden; white-space:nowrap;  </p>
            <div style="width:300px;background-color: rgb(213, 218, 223);">
                <p style="text-overflow:ellipsis; overflow:hidden; white-space:nowrap;">兼容性目前还不太好兼容性目前还不太好兼容性</p>
            </div>

        </div>

        <div style="width:300px;height: 300px;position: relative;">
            
            <div class="back"></div>
            <div class="heart"></div>
        </div>




    </div>


</body>

</html>